<template>
    <div id="nav-header">
        <div class="header">
            <img @click="goPage('/')" src="https://liblibai-web-static.vibrou.com/liblibai_v4_online/static/_next/static/images/icon-logo.e3ce24f316fb81dbde1cafc3bf956080.svg"
                alt="" srcset="">
            <div class="user">
                <el-button>训练我的模型</el-button>
                <el-button type="warning">会员中心</el-button>
                <div class="energy">
                    <svg t="1722242903660" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5188" width="20" height="20">
                        <path d="M512 64.32L288.05 512.44l222.61 111.81-110.63 335.43 335.92-447.24-225.29-111.81z"
                            fill="#FFD500" p-id="5189"></path>
                    </svg>3844
                </div>
                <img @click="goPage('/personpage')" src="http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                    alt="">
            </div>
        </div>

    </div>
</template>

<script setup>

import {useRouter} from "vue-router"

const router = useRouter()

const goPage = (path)=>{
    router.push(path)
}


</script>

<style  scoped>
#nav-header {
    width: 100%;
}

#nav-header .header {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;

    height: 40px;
    /* line-height: 40px; */
    padding: 5px 10px;
    box-shadow: 1px 1px 1px rgba(128, 128, 128, 0.5);

}

#nav-header .header .user {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

#nav-header .header .user .energy {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(128, 128, 128, 0.3);
    border-radius: 15px;
    margin: 0 10px;
    font-size: 10px;
    color: gray;
    padding: 0 5px;
}

#nav-header .header .user img {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    cursor: pointer;
}
</style>

